/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 绑定驿站
 *  */
import React, { useState, useCallback } from "react";
import { useDispatch, connect } from "dva";
import { Row, Col, Form, Button, Typography, Modal, Input } from "antd";

const { Title } = Typography;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

const BindPost = ({ form, pagination, refresh, loading }) => {
  const { getFieldDecorator, validateFields } = form;
  const dispatch = useDispatch();

  const [visible, setVisible] = useState(false);

  const onSubmit = useCallback(
    () => {
      validateFields((err, values) => {
        if (err) return;
        dispatch({
          type: "platform/bindYzAccount",
          payload: values,
        }).then(() => {
          dispatch({
            type: "platform/isCityLeague",
          });
          setVisible(false);
          refresh && refresh(pagination);
        });
      });
    },
    [validateFields, dispatch, refresh, pagination]
  );

  return (
    <Typography>
      <Row type="flex" justify="space-between">
        <Col>
          <Title>暂未添加驿站，请点击右方按钮添加</Title>
        </Col>
        <Col>
          <Button type="primary" onClick={() => setVisible(true)}>
            添加
          </Button>
        </Col>
      </Row>
      <Title>注：</Title>
      <Title level={3}>
        1.替换已添加驿站的门店及预约取件二维码（基于您定制的公众号/小程序生成），为您积累私域流量
      </Title>
      <Title level={3}>
        2.管理已添加驿站的寄件订单，可在此平台订单明细处进行相关操作（分配订单/关闭诗单）
      </Title>
      <Title level={3}>
        3.设置已添加驿站的运费在线支付及平台积分核销（基于您定制公众号/小程序的设置）
      </Title>
      <Modal
        confirmLoading={loading}
        destroyOnClose
        visible={visible}
        title="添加驿站"
        onOk={onSubmit}
        onCancel={() => setVisible(false)}
      >
        <Form {...formItemLayout}>
          <Form.Item label="账号">
            {getFieldDecorator("account", {
              rules: [
                {
                  required: true,
                  message: "请输入驿站app账号",
                },
              ],
            })(<Input placeholder="请输入手机号" allowClear />)}
          </Form.Item>
          <Form.Item label="密码" hasFeedback>
            {getFieldDecorator("password", {
              rules: [
                {
                  required: true,
                  message: "请输入密码",
                },
              ],
            })(<Input.Password placeholder="请输入密码" allowClear />)}
          </Form.Item>
        </Form>
      </Modal>
    </Typography>
  );
};

export default Form.create()(
  connect(({ loading }) => ({
    loading: loading.effects["platform/bindYzAccount"],
  }))(BindPost)
);
